
<template>
    <div id="app">
        <vw-top v-show="topShown"></vw-top>
        <vw-sphere v-show="sphereShown" :page="currentPageName"></vw-sphere>
        <vw-toolbar v-show="toolbarShown"></vw-toolbar>
        <vw-setting v-show="settingShown"></vw-setting>
        <router-view />
        <cloud-vr></cloud-vr>
        <div class="loading" v-show="loading">正在加载数据，请稍等</div>
        <Modal
            v-model="modal.web"
            title=""
            footer-hide
            :width="1680 * ratio"
            :height="945 * ratio"
        >
            <iframe
                :src="urlForModal.web"
                :width="1680 * ratio"
                :height="945 * ratio"
                class="modal-frame"
                frameborder="0"
            ></iframe>
        </Modal>
        <Modal
            v-model="modal.video"
            title=""
            footer-hide
            :width="725 * ratio"
            :height="415 * ratio"
        >
            <vm-video-player 
            :width="725 * ratio"
            :height="415 * ratio" 
            :title="titleForModal.video" 
            :src="urlForModal.video"
            :fullscreen-enable="false"></vm-video-player>
        </Modal>
        <Modal
            v-model="modal.image"
            title=""
            footer-hide
            :width="725 * ratio"
            :height="415 * ratio"
        >
            <img
                :src="urlForModal.image"
                :width="725 * ratio"
                :height="415 * ratio"
                class="modal-frame"
            ></img>
        </Modal>
        <!-- <div class="crosshair">+</div> -->
    </div>
</template>

<style scoped>
    .loading {
        font-family: "ys";
        font-size: 16px;
        padding: 24px 48px;
        background: #00000099;
        border-radius: 10px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #fff;
        z-index: 27000;
    }
    .crosshair {
        color: #fff;
        font-size: 48px;
        font-weight: 100;
        width: 48px;
        height: 48px;
        line-height: 48px;
        position: fixed;
        z-index: 99999;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<script>
    import cloudVR from "@/components/CloudVR";
    import bus from "@/lib/bus";
    import { busEventHandle } from "@/lib/extension";

    export default {
        data() {
            return {
                ratio: 1,
                loading: false,
                topShown: true,
                sphereShown: true,
                toolbarShown: true,
                settingShown: false,
                currentPageName: null,
                modal: {
                    web: false,
                    video: false,
                    image: false,
                },
                urlForModal: {
                    web: null,
                    video: null,
                    image: null,
                },
                titleForModal: {
                    web: null,
                    video: null,
                    image: null,
                },
            };
        },
        created() {
            this.listenRatioRead();
            this.listenSphereEvent();
            this.listenTopEvent();
            this.listenSettingEvent();
            this.listenLoadingEvent();
            this.listenToolbarEvent();
            this.listenModalEvent();
            
        },
        mounted() {
        },
        components: {
            "cloud-vr": cloudVR,
            "vw-sphere": () => import("./layout/Sphere"),
            "vw-top": () => import("./layout/Top"),
            "vw-toolbar": () => import("./layout/Toolbar"),
            "vw-setting": () => import("./layout/Setting"),
            "vm-video-player": () => import("./components/media/VideoPlayer"),
        },
        methods: {
            listenRatioRead() {
                const ratioRead = () => {
                    let width = document.body.clientWidth;
                    if (width >= 3840) {
                        this.ratio = 2;
                        localStorage.ratio = "2";
                    } else if (width >= 1920 && width < 3840) {
                        this.ratio = 1;
                        localStorage.ratio = "1";
                    } else if (width < 1920 && width >= 1366) {
                        this.ratio = 0.71;
                        localStorage.ratio = "0.71";
                    } else if (width < 1366) {
                        this.ratio = 0.53;
                        localStorage.ratio = "0.53";
                    }
                };

                ratioRead();

                window.onresize = () => {
                    ratioRead();
                };
            },
            listenSphereEvent() {
                busEventHandle("open-sphere", () => {
                    this.sphereShown = true;
                    bus.$emit('toggle-toolbar-sphere','open')
                });
                busEventHandle("close-sphere", () => {
                    this.sphereShown = false;
                    bus.$emit('toggle-toolbar-sphere','close')
                });
                busEventHandle("set-sphere-actived", (msg) => {
                    this.currentPageName = msg;
                });
            },
            listenTopEvent() {
                busEventHandle("open-top", () => {
                    this.topShown = true;
                });
                busEventHandle("close-top", () => {
                    this.topShown = false;
                });
            },
            listenSettingEvent() {
                busEventHandle("open-setting", () => {
                    this.settingShown = true;
                });
                busEventHandle("close-setting", () => {
                    this.settingShown = false;
                });
            },
            listenToolbarEvent() {
                busEventHandle("open-toolbar", () => {
                    this.toolbarShown = true;
                });
                busEventHandle("close-toolbar", () => {
                    this.toolbarShown = false;
                });
            },
            listenLoadingEvent() {
                busEventHandle("show-loading", (msg) => {
                    this.loading = true;
                });
                busEventHandle("hide-loading", (msg) => {
                    this.loading = false;
                });
            },
            listenModalEvent() {
                busEventHandle("open-modal", (msg) => {
                    this.modal[msg.type] = true;
                    this.urlForModal[msg.type] = msg.url;
                    this.titleForModal[msg.type] = msg.title;
                    console.log(msg);
                    //msg.mode === fullscreen branch required
                });
            },
        },
    };
</script>
